<template>
  <div>
    <div v-html="compiledMarkdown" ref="markdownContainer"></div>
  </div>
</template>

<script setup>
import "highlight.js/styles/monokai.css";
import { ref, onMounted, defineProps, h, watch, computed } from "vue";
import { marked } from "marked";
import hljs from "highlight.js";
import ClipboardJS from "clipboard";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const compiledMarkdown = ref("");
const markdownContainer = ref(null);
// Vue组件中的某个方法
const sendMessageToVSCode = (text) => {
  const message = {
    command: "vue-to-vscode", // 自定义的消息命令
    data: text, // 要发送的数据
  };

  // 发送消息到父窗口（VSCode扩展）
  if (window.parent && window.parent.postMessage) {
    window.parent.postMessage(message, "*");
  }
};
const markdownRenders = () => {
  const renderer = new marked.Renderer();

  // 自定义渲染器以添加复制按钮
  renderer.code = function (code, language) {
    const validLanguage = hljs.getLanguage(language) ? language : "plaintext";
    const highlightedCode = hljs.highlight(code, {
      language: validLanguage,
    }).value;

    const codeBlock = `
    <div class="pre-box">
      <pre>
        <code class="${validLanguage}">${highlightedCode}</code>
      </pre>
      <div class="code-button">
           <span class="insert-code" onClick="inserCode(this)" data-insert-text="${encodeURIComponent(
             code
           )}">插入</span>   
            <span class="copy-code-button" data-clipboard-text="${encodeURIComponent(
              code
            )}">复制</span>     

      </div>
    </div>
    `;

    // // 添加复制按钮
    // const button = ``;

    return codeBlock;
  };
  renderer.table = function (header, body) {
    return `<table class="custom-table">${header}${body}</table>`;
  };
  renderer.tablerow = function (content) {
    return `<tr class="custom-table-row">${content}</tr>`;
  };
  (renderer.tablecell = (content, flags) => {
    return `<td class="custom-table-cell">${content}</td>`;
  }),
    (window.inserCode = function (e) {
      const text = decodeURIComponent(e.getAttribute("data-insert-text"));

      sendMessageToVSCode(text);
    });
  compiledMarkdown.value = marked(props.modelValue, {
    renderer,
    gfm: true,
    breaks: true,
  });

  // 初始化Clipboard.js
  const clipboard = new ClipboardJS(".copy-code-button", {
    text: function (trigger) {
      return decodeURIComponent(trigger.getAttribute("data-clipboard-text"));
    },
  });

  clipboard.on("success", function (e) {
    e.clearSelection();
    alert("复制成功");
  });

  clipboard.on("error", function (e) {
    alert("复制失败：", e.action);
  });
};
watch(
  () => props.modelValue,
  (val) => {
    markdownRenders();
  },
  {
    immediate: true,
  }
);
</script>

<style>
/* 在这里添加highlight.js的样式 */
/* .copy-code-button {
  display: block;
  margin-top: 5px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 10px;
} */
.pre-box {
  width: 100%;
  position: relative;
}
.pre-box pre {
  width: 100%;
}
.pre-box .code-button {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
}
/* 在这里添加表格样式 */
.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table-row {
  /* 自定义表格行样式 */
}

.custom-table-cell {
  /* 自定义表格单元格样式 */
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.custom-table-cell:first-child {
  /* 自定义第一个单元格的样式 */
}
pre code {
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0px;
}
code {
  padding: 3px 5px;
  background-color: #82b7cd;
  border: 1px solid #eee;
  border-radius: 6px;
  color: #444;
}
</style>